<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Uni-App 筛选面板 - 淘宝/拼多多风格</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uni-app-js@0.0.4/dist/uni-app.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    }

    body {
      background-color: #f5f5f5;
      color: #333;
      font-size: 14px;
      padding-bottom: 50px;
    }

    .container {
      max-width: 480px;
      margin: 0 auto;
      background: #fff;
      min-height: 100vh;
      position: relative;
    }

    /* 顶部导航 */
    .header {
      background: linear-gradient(90deg, #ff5000, #ff9000);
      color: white;
      padding: 15px;
      display: flex;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 10px rgba(255, 80, 0, 0.2);
    }

    .header h1 {
      font-size: 18px;
      font-weight: 600;
      flex: 1;
      text-align: center;
    }

    /* 商品筛选栏 */
    .filter-bar {
      display: flex;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      position: sticky;
      top: 50px;
      z-index: 99;
    }

    .filter-item {
      flex: 1;
      text-align: center;
      padding: 12px 0;
      font-size: 14px;
      color: #666;
      position: relative;
    }

    .filter-item.active {
      color: #ff5000;
      font-weight: 500;
    }

    .filter-item i {
      margin-left: 4px;
      font-size: 12px;
      color: #999;
    }

    .filter-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 16px;
      width: 1px;
      background: #eee;
    }

    /* 商品列表 */
    .product-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      padding: 8px;
    }

    .product-item {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

    .product-img {
      width: 100%;
      height: 180px;
      background: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .product-img .tag {
      position: absolute;
      top: 8px;
      left: 8px;
      background: #ff5000;
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .product-img i {
      font-size: 60px;
      color: #e0e0e0;
    }

    .product-info {
      padding: 8px;
    }

    .product-title {
      font-size: 13px;
      height: 36px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-height: 18px;
    }

    .product-price {
      color: #ff5000;
      font-weight: bold;
      margin-top: 5px;
      font-size: 16px;
    }

    .product-price::before {
      content: '¥';
      font-size: 12px;
    }

    .product-sales {
      font-size: 12px;
      color: #999;
      margin-top: 3px;
    }

    /* 筛选面板 */
    .filter-panel {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 75vh;
      background: #fff;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      border-radius: 16px 16px 0 0;
      overflow: hidden;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }

    .filter-panel.show {
      transform: translateY(0);
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #eee;
      position: relative;
    }

    .panel-title {
      font-size: 16px;
      font-weight: 600;
    }

    .reset-btn {
      color: #666;
      font-size: 14px;
    }

    .panel-content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }

    .filter-group {
      margin-bottom: 24px;
    }

    .group-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .toggle-more {
      font-size: 12px;
      color: #666;
      font-weight: normal;
    }

    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .filter-option {
      padding: 8px 14px;
      background: #f5f5f5;
      border-radius: 20px;
      font-size: 13px;
      min-width: 70px;
      text-align: center;
    }

    .filter-option.active {
      background: #fff0e6;
      color: #ff5000;
      border: 1px solid #ff5000;
    }

    .price-range {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .price-input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
    }

    .divider {
      color: #999;
      width: 20px;
      text-align: center;
    }

    .search-box {
      display: flex;
      align-items: center;
      background: #f5f5f5;
      border-radius: 20px;
      padding: 6px 12px;
      margin-bottom: 12px;
    }

    .search-box i {
      color: #999;
      margin-right: 8px;
    }

    .search-box input {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 14px;
      outline: none;
    }

    .panel-footer {
      display: flex;
      padding: 12px 16px;
      background: #fff;
      border-top: 1px solid #eee;
    }

    .panel-btn {
      flex: 1;
      padding: 12px;
      text-align: center;
      border-radius: 20px;
      font-weight: 500;
    }

    .cancel-btn {
      background: #f5f5f5;
      color: #666;
      margin-right: 12px;
    }

    .confirm-btn {
      background: linear-gradient(90deg, #ff9000, #ff5000);
      color: #fff;
    }

    /* 遮罩层 */
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .mask.show {
      opacity: 1;
      visibility: visible;
    }

    /* 空状态提示 */
    .empty-tip {
      text-align: center;
      padding: 20px;
      color: #999;
      font-size: 14px;
    }

    /* 标签容器 */
    .selected-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 10px 16px;
      background: #f9f9f9;
      border-bottom: 1px solid #eee;
    }

    .selected-tag {
      background: #fff0e6;
      color: #ff5000;
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 12px;
      display: flex;
      align-items: center;
    }

    .selected-tag i {
      margin-left: 4px;
      font-size: 10px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <!-- 顶部导航 -->
      <div class="header">
        <i class="fas fa-arrow-left"></i>
        <h1>商品列表</h1>
        <i class="fas fa-search"></i>
      </div>

      <!-- 商品筛选栏 -->
      <div class="filter-bar">
        <div class="filter-item active">综合</div>
        <div class="filter-item">销量 <i class="fas fa-sort"></i></div>
        <div class="filter-item">价格 <i class="fas fa-sort"></i></div>
        <div class="filter-item" @click="showFilterPanel">
          筛选 <i class="fas fa-filter"></i>
          <span v-if="selectedCount > 0" style="color:#ff5000">({{selectedCount}})</span>
        </div>
      </div>

      <!-- 已选标签 -->
      <div class="selected-tags" v-if="selectedCount > 0">
        <div class="selected-tag" v-for="(tag, index) in selectedTags" :key="index">
          {{tag}} <i class="fas fa-times" @click="removeTag(tag)"></i>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="product-list">
        <div class="product-item" v-for="(item, index) in products" :key="index">
          <div class="product-img">
            <div class="tag" v-if="item.tag">{{item.tag}}</div>
            <i :class="item.icon"></i>
          </div>
          <div class="product-info">
            <div class="product-title">{{item.title}}</div>
            <div class="product-price">{{item.price}}</div>
            <div class="product-sales">月销{{item.sales}}件</div>
          </div>
        </div>
      </div>

      <!-- 筛选面板 -->
      <div class="filter-panel" :class="{show: showPanel}">
        <div class="panel-header">
          <div class="panel-title">商品筛选</div>
          <div class="reset-btn" @click="resetFilters">重置</div>
        </div>

        <div class="panel-content">
          <!-- 品牌筛选 -->
          <div class="filter-group">
            <div class="group-title">
              <span>品牌</span>
              <span class="toggle-more" @click="toggleShowAll('brand')">
                {{showAll.brand ? '收起' : '展开更多'}}
              </span>
            </div>
            <div class="search-box">
              <i class="fas fa-search"></i>
              <input type="text" placeholder="搜索品牌" v-model="brandSearch">
            </div>
            <div class="filter-options">
              <div class="filter-option" v-for="(brand, index) in filteredBrands" :key="'brand-'+index"
                :class="{active: selectedBrands.includes(brand)}" @click="toggleBrand(brand)">
                {{brand}}
              </div>
              <div class="empty-tip" v-if="filteredBrands.length === 0">
                没有找到相关品牌
              </div>
            </div>
          </div>

          <!-- 价格区间 -->
          <div class="filter-group">
            <div class="group-title">价格区间 (元)</div>
            <div class="price-range">
              <input type="number" class="price-input" placeholder="最低价" v-model="minPrice">
              <div class="divider">-</div>
              <input type="number" class="price-input" placeholder="最高价" v-model="maxPrice">
            </div>
          </div>

          <!-- 分类 -->
          <div class="filter-group">
            <div class="group-title">
              <span>分类</span>
            </div>
            <div class="filter-options">
              <div class="filter-option" v-for="(cate, index) in categories" :key="'cate-'+index"
                :class="{active: selectedCategory === cate}" @click="selectCategory(cate)">
                {{cate}}
              </div>
            </div>
          </div>

          <!-- 服务 -->
          <div class="filter-group">
            <div class="group-title">
              <span>服务</span>
            </div>
            <div class="filter-options">
              <div class="filter-option" v-for="(service, index) in services" :key="'service-'+index"
                :class="{active: selectedServices.includes(service)}" @click="toggleService(service)">
                {{service}}
              </div>
            </div>
          </div>

          <!-- 发货地 -->
          <div class="filter-group">
            <div class="group-title">
              <span>发货地</span>
              <span class="toggle-more" @click="toggleShowAll('location')">
                {{showAll.location ? '收起' : '展开更多'}}
              </span>
            </div>
            <div class="search-box">
              <i class="fas fa-search"></i>
              <input type="text" placeholder="搜索发货地" v-model="locationSearch">
            </div>
            <div class="filter-options">
              <div class="filter-option" v-for="(location, index) in filteredLocations" :key="'location-'+index"
                :class="{active: selectedLocations.includes(location)}" @click="toggleLocation(location)">
                {{location}}
              </div>
            </div>
          </div>
        </div>

        <div class="panel-footer">
          <div class="panel-btn cancel-btn" @click="closePanel">取消</div>
          <div class="panel-btn confirm-btn" @click="applyFilters">确定({{filteredProductsCount}}件)</div>
        </div>
      </div>

      <!-- 遮罩层 -->
      <div class="mask" :class="{show: showPanel}" @click="closePanel"></div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        showPanel: false,
        minPrice: '',
        maxPrice: '',
        selectedBrands: [],
        selectedCategory: '',
        selectedServices: [],
        selectedLocations: [],
        brandSearch: '',
        locationSearch: '',
        showAll: {
          brand: false,
          location: false
        },
        brands: [
          '耐克', '阿迪达斯', '小米', '华为', '苹果', '优衣库', '李宁',
          '安踏', '三星', 'OPPO', 'VIVO', '联想', '戴尔', '惠普', '美的',
          '格力', '海尔', '三只松鼠', '良品铺子', '百草味'
        ],
        categories: [
          '手机数码', '电脑办公', '服装鞋包', '美妆护肤',
          '家居家装', '食品生鲜', '母婴玩具', '运动户外'
        ],
        services: [
          '仅看有货', '7天无理由', '运费险', '分期免息',
          '货到付款', '京东物流', '次日达'
        ],
        locations: [
          '北京', '上海', '广州', '深圳', '杭州', '南京', '成都',
          '重庆', '武汉', '天津', '苏州', '西安', '长沙', '郑州',
          '青岛', '沈阳', '宁波', '东莞', '无锡', '佛山'
        ],
        products: [
          { icon: 'fas fa-tshirt', title: '2023新款男士短袖T恤纯棉圆领潮流百搭休闲上衣', price: '89.00', sales: '2.5万', tag: '新品' },
          { icon: 'fas fa-shoe-prints', title: '夏季透气运动鞋男女同款轻便跑步鞋休闲鞋', price: '159.00', sales: '1.8万' },
          { icon: 'fas fa-mobile-alt', title: '旗舰手机6.7英寸大屏5G全网通智能手机', price: '2399.00', sales: '8500' },
          { icon: 'fas fa-laptop', title: '轻薄笔记本电脑14英寸超薄便携商务办公本', price: '4299.00', sales: '3200', tag: '热卖' },
          { icon: 'fas fa-headphones', title: '无线蓝牙耳机入耳式运动降噪音乐耳机', price: '199.00', sales: '5.2万' },
          { icon: 'fas fa-umbrella-beach', title: '防晒遮阳伞UPF50+防紫外线晴雨两用折叠伞', price: '59.00', sales: '3.6万' },
          { icon: 'fas fa-couch', title: '现代简约布艺沙发客厅小户型三人位沙发', price: '1899.00', sales: '1200' },
          { icon: 'fas fa-utensils', title: '304不锈钢餐具套装家用组合碗筷勺', price: '129.00', sales: '2.8万' }
        ]
      },
      computed: {
        // 过滤后的品牌列表
        filteredBrands() {
          let result = this.brands;

          // 搜索过滤
          if (this.brandSearch) {
            result = result.filter(brand =>
              brand.toLowerCase().includes(this.brandSearch.toLowerCase())
            );
          }

          // 是否显示全部
          if (!this.showAll.brand) {
            result = result.slice(0, 6);
          }

          return result;
        },

        // 过滤后的发货地列表
        filteredLocations() {
          let result = this.locations;

          // 搜索过滤
          if (this.locationSearch) {
            result = result.filter(location =>
              location.toLowerCase().includes(this.locationSearch.toLowerCase())
            );
          }

          // 是否显示全部
          if (!this.showAll.location) {
            result = result.slice(0, 6);
          }

          return result;
        },

        // 已选标签
        selectedTags() {
          const tags = [];

          // 品牌
          this.selectedBrands.forEach(brand => {
            tags.push(brand);
          });

          // 分类
          if (this.selectedCategory) {
            tags.push(this.selectedCategory);
          }

          // 服务
          this.selectedServices.forEach(service => {
            tags.push(service);
          });

          // 发货地
          this.selectedLocations.forEach(location => {
            tags.push(location);
          });

          // 价格区间
          if (this.minPrice || this.maxPrice) {
            let priceTag = '';
            if (this.minPrice) priceTag += `¥${this.minPrice}`;
            if (this.minPrice && this.maxPrice) priceTag += '-';
            if (this.maxPrice) priceTag += `¥${this.maxPrice}`;
            tags.push(priceTag);
          }

          return tags;
        },

        // 已选条件数量
        selectedCount() {
          return this.selectedTags.length;
        },

        // 过滤后的商品数量（演示用）
        filteredProductsCount() {
          // 在实际应用中，这里应该根据筛选条件计算商品数量
          // 这里简化处理，返回一个随机数
          return Math.floor(Math.random() * 100) + 50;
        }
      },
      methods: {
        // 显示筛选面板
        showFilterPanel() {
          this.showPanel = true;
        },

        // 关闭面板
        closePanel() {
          this.showPanel = false;
        },

        // 重置所有筛选条件
        resetFilters() {
          this.selectedBrands = [];
          this.selectedCategory = '';
          this.selectedServices = [];
          this.selectedLocations = [];
          this.minPrice = '';
          this.maxPrice = '';
          this.brandSearch = '';
          this.locationSearch = '';
        },

        // 切换品牌选择
        toggleBrand(brand) {
          const index = this.selectedBrands.indexOf(brand);
          if (index >= 0) {
            this.selectedBrands.splice(index, 1);
          } else {
            this.selectedBrands.push(brand);
          }
        },

        // 选择分类
        selectCategory(category) {
          this.selectedCategory = this.selectedCategory === category ? '' : category;
        },

        // 切换服务选择
        toggleService(service) {
          const index = this.selectedServices.indexOf(service);
          if (index >= 0) {
            this.selectedServices.splice(index, 1);
          } else {
            this.selectedServices.push(service);
          }
        },

        // 切换发货地选择
        toggleLocation(location) {
          const index = this.selectedLocations.indexOf(location);
          if (index >= 0) {
            this.selectedLocations.splice(index, 1);
          } else {
            this.selectedLocations.push(location);
          }
        },

        // 切换显示更多
        toggleShowAll(type) {
          this.showAll[type] = !this.showAll[type];
        },

        // 移除标签
        removeTag(tag) {
          // 尝试从不同筛选条件中移除
          const brandIndex = this.selectedBrands.indexOf(tag);
          if (brandIndex >= 0) {
            this.selectedBrands.splice(brandIndex, 1);
            return;
          }

          if (this.selectedCategory === tag) {
            this.selectedCategory = '';
            return;
          }

          const serviceIndex = this.selectedServices.indexOf(tag);
          if (serviceIndex >= 0) {
            this.selectedServices.splice(serviceIndex, 1);
            return;
          }

          const locationIndex = this.selectedLocations.indexOf(tag);
          if (locationIndex >= 0) {
            this.selectedLocations.splice(locationIndex, 1);
            return;
          }

          // 如果是价格区间
          if (tag.includes('¥')) {
            this.minPrice = '';
            this.maxPrice = '';
          }
        },

        // 应用筛选条件
        applyFilters() {
          // 在实际应用中，这里应该发送筛选条件到后端或本地过滤商品
          // 这里只关闭面板并更新商品数量显示
          this.closePanel();
          // 可以在这里添加实际筛选逻辑
        }
      }
    });
  </script>
</body>

</html>